<template>
  <div>
    <div class="control">
      <Button type="primary" @click="add">添加</Button>
    </div>
    <Table :loading="loading" :columns="tableColumns" :data="tableData" :border="true">
      <template slot="logo" slot-scope="{row,index}">
        <img :src="row.logo">
      </template>
      <template slot="action" slot-scope="{row,index}">
        <Button type="primary" @click="edit(index)">编辑</Button>
        <Button type="error" @click="del(index)">删除</Button>
      </template>
    </Table>
    <div class="pagination">
      <Page :total="count" :page-size="pageSize" show-sizer @on-change="changePage"
            @on-page-size-change="changePageSize"></Page>
    </div>

    <Modal v-model="modal"
           title="添加/编辑"
           :draggable="false">
      <div slot="footer">
        <Button @click="modal = false">取消</Button>
        <Button type="primary" @click="handlerSubmit">确定</Button>
      </div>
      <Form ref="editForm" :model="editForm" :rules="formRules" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input v-model="editForm.name"></Input>
        </FormItem>
        <FormItem label="logo" prop="logo">
          <Input v-model="editForm.logo"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "store",
    data() {
      return {
        loading: false,
        tableColumns: [
          {title: 'ID', key: 'id'},
          {title: '商家名称', key: 'name'},
          {title: 'logo', slot: 'logo'},
          {title: '注册时间', key: 'create_time'},
          {title: '操作', slot: 'action'}
        ],
        tableData: [],
        count: 0,
        pageIndex: 1,
        pageSize: 10,
        modal: false,
        editForm: {
          name: '',
          logo:'',
        },
        formRules: {
          name: [
            {required: true, message: '请填写店铺名称', trigger: 'blur'}
          ],
        }
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        const that = this;
        this.loading = true;
        this.$axios.get('admin/store/list', {
          params: {pageIndex: this.pageIndex, pageSize: this.pageSize}
        }).then(res => {
          that.tableData = res.data.data;
          that.count = res.data.count;
          that.loading = false;
        })
      },
      handlerSubmit() {
        const that = this;
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            that.$Spin.show();
            that.$axios.post('admin/store/edit', that.editForm).then(res => {
              that.$Spin.hide();
              that.loadData();
            })
            that.modal = false;
          }
        })
      },
      add() {
        this.editForm = {};
        this.modal = true;
      },
      edit(index) {
        this.editForm = this.tableData[index];
        this.modal = true;
      },
      del(index) {
        const that = this;
        this.$Modal.confirm({
          title: '确认删除？',
          content: '此操作不可逆，是否确认删除当前这条数据',
          onOk: () => {
            that.$axios.post('admin/store/del', {id: that.tableData[index].id}).then(res => {
              if (res.code === 0) {
                that.$Message.success('删除成功');
                that.loadData();
              }
            })
          }
        });
      },
      changePage(e) {
        this.pageIndex = e;
        this.loadData();
      },
      changePageSize(e) {
        this.pageSize = e;
        this.loadData();
      }
    }
  }
</script>

<style scoped>

</style>